<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="libs/font-awesome/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="libs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">

    <script src="libs/jquery.min.js"></script>
    <script src="libs/template7.min.js"></script>
    <script src="libs/bootstrap/bootstrap.min.js"></script>
    <script src="libs/noty/jquery.noty.packaged.min.js"></script>
    <script src="libs/utils.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="table-responsive">
    <table id="service-table" class="table table-hover">
        <thead>
            <tr>
                <th>服务名</th>
                <th>查看详情</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="modal fade" id="detail-dialog" role="dialog" data-backdrop="static" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="service-modal-title">服务详情</h4>
            </div>
            <div class="modal-body ">
                <input type="hidden" id="modal-service-name" />
                <div class="table-responsive">
                    <table id="service-provider-table" class="table table-hover">
                        <thead>
                        <tr>
                            <th>提供者地址</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="table-responsive">
                    <table id="service-consumer-table" class="table table-hover">
                        <thead>
                        <tr>
                            <th>消费者地址</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirm-dialog" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title confirm-dialog-title" id="myModalLabel">确认</h4>
            </div>
            <div class="modal-body confirm-dialog-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default confirm-dialog-no" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary confirm-dialog-ok">确认</button>
            </div>
        </div>
    </div>
</div>
<script type="text/template" id="service-template">
    {{#each list}}
    <tr>
        <td>{{this}}</td>
        <td>
            <a class="service-list-edit table-link">
                    <span class="fa-stack">
                        <i class="fa fa-square fa-stack-2x"></i>
                        <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                    </span>
            </a>
        </td>
    </tr>
    {{/each}}
</script>
<script type="text/template" id="service-provider-template">
    {{#each list}}
    <tr>
        <td class="address">{{address}}</td>
        {{#js_compare "this.enable===true"}}
        <td><span class="label label-success">启用</span></td>
        {{else}}
        <td><span class="label label-danger">禁用</span></td>
        {{/js_compare}}
        <td>
            <a class="service-provider-enable table-link" enable="{{enable}}">
                <span class="fa-stack">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                </span>
            </a>
        </td>
    </tr>
    {{/each}}
</script>
<script type="text/template" id="service-consumer-template">
    {{#each list}}
    <tr>
        <td>{{this}}</td>
    </tr>
    {{/each}}
</script>

</body>
</html>
